<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业名片模版工具</title>
    <script src="../js/html2canvas.min.js"></script>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 10px;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.5;
        }
        
        .container {
            margin: 10px auto;
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .editor-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .controls {
            flex: 1;
            min-width: 300px;
            padding: 12px;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .preview {
            flex: 1;
            min-width: 300px;
            min-height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f1f5f9;
            border-radius: 6px;
            padding: 10px;
        }
        
        .façade {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .façade::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
        }
        
        .company-name {
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            position: relative;
            color: white;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }
        
        .company-slogan {
            font-size: 1.2rem;
            margin-top: 5px;
            opacity: 0.9;
        }
        
        .control-group {
            margin-bottom: 12px;
        }
        
        .control-group label {
            display: block;
            margin-bottom: 4px;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .control-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .control-row .control-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        input, select {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.85rem;
            font-family: inherit;
        }
        
        input:focus, select:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .color-picker {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .color-picker input[type="color"] {
            width: 30px;
            height: 30px;
            padding: 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .color-picker input[type="text"] {
            flex: 1;
            min-width: 60px;
        }
        
        .btn-group {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }
        
        button {
            flex: 1;
            padding: 8px;
            border: none;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        #generateBtn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        #generateBtn:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        
        #downloadBtn {
            background: linear-gradient(135deg, #66ccea 0%, #2f4ca3 100%);
            color: white;
        }
        
        #downloadBtn:hover {
            background: linear-gradient(135deg, #2f4ca3 0%, #66ccea 100%);
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .slider-container input[type="range"] {
            flex: 1;
            height: 4px;
        }
        
        .slider-container input[type="range"]::-webkit-slider-thumb {
            width: 14px;
            height: 14px;
            background: var(--primary-color);
        }
        
        .slider-value {
            min-width: 30px;
            font-size: 0.8rem;
            text-align: center;
        }
        
        .template-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin-bottom: 10px;
        }
        
        .template {
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }
        
        .template:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        }
        
        .template.active {
            box-shadow: 0 0 0 2px var(--primary-color);
        }
        
        .façade-bg-pattern {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            background-size: 30px 30px;
            background-image: 
                linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),
                linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
        }
        
        @media (max-width: 700px) {
            .template-selector {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .controls, .preview {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="editor-container">
            <div class="controls">
                <div class="control-group">
                    <label for="companyName">公司名称</label>
                    <input type="text" id="companyName" placeholder="请输入公司名称" value="示例科技">
                </div>
                
                <div class="control-group">
                    <label for="companySlogan">公司标语 (可选)</label>
                    <input type="text" id="companySlogan" placeholder="请输入公司标语" value="专业 · 创新 · 卓越">
                </div>
                
                <div class="control-group">
                    <label>预设模板</label>
                    <div class="template-selector">
                        <div class="template" style="background: linear-gradient(135deg, #3498db, #2c3e50);" data-template="blue-dark">商务蓝</div>
                        <div class="template" style="background: linear-gradient(135deg, #e74c3c, #c0392b);" data-template="red">经典红</div>
                        <div class="template" style="background: linear-gradient(135deg, #2ecc71, #27ae60);" data-template="green">生态绿</div>
                        <div class="template" style="background: linear-gradient(135deg, #f39c12, #d35400);" data-template="orange">活力橙</div>
                        <div class="template" style="background: linear-gradient(135deg, #9b59b6, #8e44ad);" data-template="purple">优雅紫</div>
                        <div class="template" style="background: linear-gradient(135deg, #1abc9c, #16a085);" data-template="turquoise">清新青</div>
                    </div>
                </div>
                
                <div class="control-row">
                    <div class="control-group">
                        <label for="fontFamily">字体</label>
                        <select id="fontFamily">
                            <option value="'Microsoft YaHei', sans-serif">微软雅黑</option>
                            <option value="'SimSun', serif">宋体</option>
                            <option value="'SimHei', sans-serif">黑体</option>
                            <option value="'KaiTi', serif">楷体</option>
                            <option value="'Noto Sans SC', sans-serif">思源黑体</option>
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <label for="fontSize">字号</label>
                        <div class="slider-container">
                            <input type="range" id="fontSize" min="16" max="48" value="24">
                            <span class="slider-value" id="fontSizeValue">24</span>
                        </div>
                    </div>
                </div>
                
                <div class="control-row">
                    <div class="control-group">
                        <label for="textColor">文字颜色</label>
                        <div class="color-picker">
                            <input type="text" id="textColor" value="#ffffff">
                            <input type="color" id="textColorPicker" value="#ffffff">
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="fontWeight">字重</label>
                        <select id="fontWeight">
                            <option value="400">常规</option>
                            <option value="300">细体</option>
                            <option value="500">中等</option>
                            <option value="700">加粗</option>
                        </select>
                    </div>
                </div>
                
                <div class="control-group">
                    <label for="bgType">背景类型</label>
                    <select id="bgType">
                        <option value="solid">纯色</option>
                        <option value="gradient" selected>渐变</option>
                        <option value="pattern">图案</option>
                    </select>
                </div>
                
                <div class="control-row">
                    <div class="control-group" id="bgColorGroup">
                        <label for="bgColor">背景主色</label>
                        <div class="color-picker">
                            <input type="text" id="bgColor" value="#3498db">
                            <input type="color" id="bgColorPicker" value="#3498db">
                        </div>
                    </div>
                    
                    <div class="control-group" id="gradientColorGroup">
                        <label for="gradientColor">背景次色</label>
                        <div class="color-picker">
                            <input type="text" id="gradientColor" value="#2c3e50">
                            <input type="color" id="gradientColorPicker" value="#2c3e50">
                        </div>
                    </div>
                </div>
                
                <div class="control-row">
                    <div class="control-group">
                        <label for="borderRadius">圆角</label>
                        <div class="slider-container">
                            <input type="range" id="borderRadius" min="0" max="20" value="5">
                            <span class="slider-value" id="borderRadiusValue">5</span>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="shadow">阴影</label>
                        <div class="slider-container">
                            <input type="range" id="shadow" min="0" max="15" value="5">
                            <span class="slider-value" id="shadowValue">5</span>
                        </div>
                    </div>
                </div>
                
                <div class="btn-group">
                    <button id="generateBtn">生成预览</button>
                    <button id="downloadBtn">下载图片</button>
                </div>
            </div>
            
            <div class="preview">
                <div class="façade" id="façadePreview">
                    <div class="façade-bg-pattern" id="bgPattern"></div>
                    <div class="company-name" id="previewText">
                        <div id="companyNameText">示例科技</div>
                        <div class="company-slogan" id="companySloganText">专业 · 创新 · 卓越</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const elements = {
            companyName: document.getElementById('companyName'),
            companySlogan: document.getElementById('companySlogan'),
            fontFamily: document.getElementById('fontFamily'),
            fontSize: document.getElementById('fontSize'),
            fontSizeValue: document.getElementById('fontSizeValue'),
            fontWeight: document.getElementById('fontWeight'),
            textColor: document.getElementById('textColor'),
            textColorPicker: document.getElementById('textColorPicker'),
            bgColor: document.getElementById('bgColor'),
            bgColorPicker: document.getElementById('bgColorPicker'),
            bgType: document.getElementById('bgType'),
            gradientColor: document.getElementById('gradientColor'),
            gradientColorPicker: document.getElementById('gradientColorPicker'),
            borderRadius: document.getElementById('borderRadius'),
            borderRadiusValue: document.getElementById('borderRadiusValue'),
            shadow: document.getElementById('shadow'),
            shadowValue: document.getElementById('shadowValue'),
            generateBtn: document.getElementById('generateBtn'),
            downloadBtn: document.getElementById('downloadBtn'),
            façadePreview: document.getElementById('façadePreview'),
            companyNameText: document.getElementById('companyNameText'),
            companySloganText: document.getElementById('companySloganText'),
            bgPattern: document.getElementById('bgPattern'),
            bgColorGroup: document.getElementById('bgColorGroup'),
            gradientColorGroup: document.getElementById('gradientColorGroup'),
            templates: document.querySelectorAll('.template')
        };

        // 初始化
        function init() {
            // 设置模板
            elements.templates[0].classList.add('active');
            
            // 事件监听
            setupEventListeners();
            
            // 初始生成
            generateFacade();
        }

        // 设置事件监听
        function setupEventListeners() {
            // 滑块值显示
            elements.fontSize.addEventListener('input', () => {
                elements.fontSizeValue.textContent = elements.fontSize.value;
            });
            
            elements.borderRadius.addEventListener('input', () => {
                elements.borderRadiusValue.textContent = elements.borderRadius.value;
            });
            
            elements.shadow.addEventListener('input', () => {
                elements.shadowValue.textContent = elements.shadow.value;
            });
            
            // 颜色选择器同步
            elements.textColorPicker.addEventListener('input', () => {
                elements.textColor.value = elements.textColorPicker.value;
            });
            
            elements.textColor.addEventListener('input', () => {
                elements.textColorPicker.value = elements.textColor.value;
            });
            
            elements.bgColorPicker.addEventListener('input', () => {
                elements.bgColor.value = elements.bgColorPicker.value;
            });
            
            elements.bgColor.addEventListener('input', () => {
                elements.bgColorPicker.value = elements.bgColor.value;
            });
            
            elements.gradientColorPicker.addEventListener('input', () => {
                elements.gradientColor.value = elements.gradientColorPicker.value;
            });
            
            elements.gradientColor.addEventListener('input', () => {
                elements.gradientColorPicker.value = elements.gradientColor.value;
            });
            
            // 背景类型变化
            elements.bgType.addEventListener('change', () => {
                elements.gradientColorGroup.style.display = elements.bgType.value === 'gradient' ? 'block' : 'none';
                elements.bgPattern.style.display = elements.bgType.value === 'pattern' ? 'block' : 'none';
            });
            
            // 模板选择
            elements.templates.forEach(template => {
                template.addEventListener('click', function() {
                    elements.templates.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    applyTemplate(this.dataset.template);
                });
            });
            
            // 生成按钮
            elements.generateBtn.addEventListener('click', generateFacade);
            
            // 下载按钮
            elements.downloadBtn.addEventListener('click', () => {
                html2canvas(elements.façadePreview).then(canvas => {
                    const link = document.createElement('a');
                    link.download = 'business_card.png';
                    link.href = canvas.toDataURL('image/png');
                    link.click();
                });
            });
        }

        // 应用模板
        function applyTemplate(template) {
            switch(template) {
                case 'blue-dark':
                    elements.bgColor.value = '#3498db';
                    elements.gradientColor.value = '#2c3e50';
                    elements.bgType.value = 'gradient';
                    elements.textColor.value = '#ffffff';
                    break;
                case 'red':
                    elements.bgColor.value = '#e74c3c';
                    elements.gradientColor.value = '#c0392b';
                    elements.bgType.value = 'gradient';
                    elements.textColor.value = '#ffffff';
                    break;
                case 'green':
                    elements.bgColor.value = '#2ecc71';
                    elements.gradientColor.value = '#27ae60';
                    elements.bgType.value = 'gradient';
                    elements.textColor.value = '#ffffff';
                    break;
                case 'orange':
                    elements.bgColor.value = '#f39c12';
                    elements.gradientColor.value = '#d35400';
                    elements.bgType.value = 'gradient';
                    elements.textColor.value = '#ffffff';
                    break;
                case 'purple':
                    elements.bgColor.value = '#9b59b6';
                    elements.gradientColor.value = '#8e44ad';
                    elements.bgType.value = 'gradient';
                    elements.textColor.value = '#ffffff';
                    break;
                case 'turquoise':
                    elements.bgColor.value = '#1abc9c';
                    elements.gradientColor.value = '#16a085';
                    elements.bgType.value = 'gradient';
                    elements.textColor.value = '#ffffff';
                    break;
            }
            
            // 更新颜色选择器
            elements.textColorPicker.value = elements.textColor.value;
            elements.bgColorPicker.value = elements.bgColor.value;
            elements.gradientColorPicker.value = elements.gradientColor.value;
            
            // 显示/隐藏渐变颜色容器
            elements.gradientColorGroup.style.display = elements.bgType.value === 'gradient' ? 'block' : 'none';
            elements.bgPattern.style.display = elements.bgType.value === 'pattern' ? 'block' : 'none';
            
            // 重新生成
            generateFacade();
        }

        // 生成门头
        function generateFacade() {
            // 更新公司名称和标语
            elements.companyNameText.textContent = elements.companyName.value || "公司名称";
            elements.companySloganText.textContent = elements.companySlogan.value || "";
            
            // 更新文字样式
            elements.companyNameText.style.fontFamily = elements.fontFamily.value;
            elements.companyNameText.style.fontSize = elements.fontSize.value + 'px';
            elements.companyNameText.style.fontWeight = elements.fontWeight.value;
            elements.companyNameText.style.color = elements.textColor.value;
            
            elements.companySloganText.style.fontFamily = elements.fontFamily.value;
            elements.companySloganText.style.color = elements.textColor.value;
            
            // 更新背景样式
            const bgType = elements.bgType.value;
            if (bgType === 'solid') {
                elements.façadePreview.style.background = elements.bgColor.value;
            } else if (bgType === 'gradient') {
                elements.façadePreview.style.background = 
                    `linear-gradient(135deg, ${elements.bgColor.value}, ${elements.gradientColor.value})`;
            } else if (bgType === 'pattern') {
                elements.façadePreview.style.background = elements.bgColor.value;
                elements.bgPattern.style.color = elements.textColor.value;
            }
            
            // 更新其他样式
            elements.façadePreview.style.borderRadius = elements.borderRadius.value + 'px';
            elements.façadePreview.style.boxShadow = `0 ${elements.shadow.value}px ${elements.shadow.value * 2}px rgba(0,0,0,0.15)`;
        }

        // 初始化应用
        init();
    </script>
</body>
</html>